﻿<! Doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title></title>
    <link rel="Stylesheet" href="css/Zadacha-4-Positioning-w3schools.css" />
</head>
<body>
    <div id="wrapper">
       <nav id="main_nav">
            <h1 class="home_link">HOME</h1>
            <ul class="nav_links_conteiners">
                <li><a href="#" class="primary_links">CSS Basic</a>
                    <ul>
                        <li><a href="#">CSS Introduction</a></li>
                        <li><a href="#">CSS Syntax</a></li>
                        <li><a href="#">CSS How To</a></li>
                        <li><a href="#">CSS Background</a></li>
                        <li><a href="#">CSS Text</a></li>
                        <li><a href="#">CSS Font</a></li>
                        <li><a href="#">CSS Border</a></li>
                        <li><a href="#">CSS Outline</a></li>
                        <li><a href="#">CSS Margin</a></li>
                        <li><a href="#">CSS Padding</a></li>
                        <li><a href="#">CSS List</a></li>
                        <li><a href="#">CSS Table</a></li>
                    </ul>
                </li>
            </ul>

           <ul class="nav_links_conteiners">
               <li><a href="#" class="primary_links">CSS Advanced</a>
                   <ul>
                       <li><a href="#">CSS Dimension</a></li>
                       <li><a href="#">CSS Classification</a></li>
                       <li><a href="#">CSS Positioning</a></li>
                       <li><a href="#">CSS Pseudo-class</a></li>
                       <li><a href="#">CSS Pseudo-element</a></li>
                       <li><a href="#">CSS Image Gallery</a></li>
                       <li><a href="#">CSS Image Opacity</a></li>
                       <li><a href="#">CSS Media Types</a></li>
                       <li><a href="#">CSS Don't</a></li>
                       <li><a href="#">CSS Summary</a></li>
                   </ul>   
               </li>
           </ul>

           <ul class="nav_links_conteiners">
               <li><a href="#" class="primary_links">CSS Examples</a>
                   <ul>
                       <li><a href="#">CSS Examples</a></li>
                   </ul>
               </li>
           </ul>

           <ul>
               <li><a href="#" class="primary_links">CSS Resferaces</a>
                   <ul>
                       <li><a href="#">CSS2 Reference</a></li>
                       <li><a href="#">CSS2 Print</a></li>
                       <li><a href="#">CSS2 Aural</a></li>
                       <li><a href="#">CSS Units</a></li>
                       <li><a href="#">CSS Colors</a></li>
                       <li><a href="#">CSS Colorvalues</a></li>
                       <li><a href="#">CSS Colornames</a></li>
                   </ul>
               </li>
           </ul>
           <ul class="nav_links_conteiners">
               <li><a href="#" class="primary_links">CSS Quiz</a>
                   <ul>
                       <li><a href="#">CSS Quiz</a></li>
                       <li><a href="#">CSS Exam</a></li>
                   </ul>
               </li>
           </ul>
       </nav>

       <section id="main_content">
			<header>
				<h2>CSS Tutorial</h2>
				<nav>
					<ul>
						<li class="buttons prev"><a href="#">Previous</a></li>
						<li class="buttons next"><a href="#">Next</a></li>
					</ul>
				</nav>
			</header>
			<hr />
			<section>
				<article>
					<h2>CSS Tutorial</h2>
					<img src="images/CSS_tutorial_aritcle.png" alt="CSStutorial" wtdth="96px" height="68px" />
					<p><strong>Save a lot of work with CSS!</strong></p>
					<p><strong>In our CSS tutorial you will learn how to use CSS to control the style and layout
						of multiple Web pages all at once.</strong>
					</p>
					
					<a href="#">Start learning CSS!</a>
				</article>
				<article>
					<h2>CSS Examples</h2>
					<p>
						Learn from over 150 examples! With our editor, you can edit the CSS, and click on
						a button to view the result.
					</p>
					<a href="#">Try-It-Yourself!</a>
				</article>
				<article>
					<h2>CSS References</h2>
					<p>
						Test your CSS skills at W3Schools!
					</p>
					<a href="#">Start CSS Quiz!</a>
				</article>
			</section>
				<hr />
			<footer>
				<nav>
					<ul>
						<li class="buttons prev"><a href="#" >Previous</a></li>
						<li class="buttons next"><a href="#">Next</a></li>
					</ul>
				</nav>
			</footer>
				<hr />
       </section>
	   <aside>
			<section>
				<h2>Site search</h2>
				
				<ul class="box">
					<li>
						<form method="get" action="ne6tosi.php">
							<input type="search" class="search" />
							<input type="submit" value="..." class="searchBtn"/>
						</form>
					</li>
					<li><a href="#">About W3Schools</a></li>
					<li><a href="#">W3Schools Forum</a></li>
				</ul>
			</section>

			<section>
				<ul class="box">
					<li>
						<a href="#"><img src="images/25_styles.png" alt="25+Styles"/></a>
					</li>
					<li><a href="#">Dynamic button image generation</a></li>
				</ul>
			</section>
			<section>
				<h2>Web Hosting</h2>
				<ul>
					<li class="box">
						<ul>
							<li><a href="#">$15 Domin Name</a></li>
							<li><a href="#">Registration</a></li>
							<li><a href="#">Save $20 / year!</a></li>
						</ul>
					</li>
					<li class="box">
						<ul>
							<li><a href="#">UK Domain Names</a></li>
							<li><a href="#">UK Web Hosting</a></li>
							<li><a href="#">Alojamiento Web</a></li>
						</ul>
					</li>
					<li class="box">
						<ul>
							<li><a href="#">Buy UK Domain Names</a></li>
							<li><a href="#">Register Domain Names</a></li>
						</ul>
					</li>
					<li class="box">
						<ul>
							<li><a href="#">Cheap Domain Names</a></li>
							<li><a href="#">Cheap Web Hosting</a></li>
						</ul>
					</li>
					<li class="box"><a href="#">Best Web Hosting</a></li>
					<li class="box"><a href="#">Domain Name</a></li>
					<li class="box"><a href="#">Registration</a></li>
					<li class="box"><a href="#">PHP MySQL Hosting</a></li>
					<li class="box"><a href="#">Top 10 Web Hosting</a></li>
					<li class="box"><a href="#">Web Hosting Providers</a></li>
					<li class="box"><a href="#">Web Hosting Company</a></li>
					<li class="box"><a href="#">Web Hosting Reviews</a></li>
					<li class="box"><a href="#">UK Web Hosting</a></li>
				</ul>
			</section>
	   </aside>
    </div>
</body>
</html>
